<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dynamic venn.js example</title>
    <style>
        body {
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 14px;
        }
    </style>
</head>

<body>
<div style="float:left;padding:20px">
    <table>
    <tr>
      <td>|A|</td>
      <td>
        <input class="input-mini venn_area" id="A" type="number" value="16">
      </td>
    </tr>
    <tr>
      <td>|B|</td>
      <td>
        <input class="input-mini venn_area" id="B" type="number" value="16">
      </td>
    </tr>
    <tr>
      <td>|C|</td>
      <td>
        <input class="input-mini venn_area" id="C" type="number" value="12">
      </td>
    </tr>
    <tr>
      <td>|A&#8745B|</td>
      <td>
        <input class="input-mini venn_area" id="A,B" type="number" value="4">
      </td>
    </tr>
    <tr>
      <td>|A&#8745C|</td>
      <td>
        <input class="input-mini venn_area" id="A,C" type="number" value="4">
      </td>
    </tr>
    <tr>
      <td>|B&#8745C|</td>
      <td>
        <input class="input-mini venn_area" id="B,C" type="number" value="3">
      </td>
    </tr>
    <tr>
      <td>|A&#8745B&#8745C|&nbsp</td>
      <td>
        <input class="input-mini venn_area" id="A,B,C" type="number" value="2">
      </td>
    </tr>
    </table>
</div>
<div id="venn"></div>
<div style="clear: both;"></div>

</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="../venn.js"></script>
<script>
function getSetIntersections() {
    areas = d3.selectAll(".venn_area").nodes().map(
        function (element) {
            return { sets: element.id.split(","),
                     size: parseFloat(element.value)};} );
    return areas;
}


// draw the initial set
var chart = venn.VennDiagram()
                 .width(600)
                 .height(500);

function draw() {
    d3.select("#venn").datum(getSetIntersections()).call(chart);
    // tweak style
    var colours = ['black', 'red', 'blue'];
    d3.selectAll("#venn .venn-circle path")
        .style("fill-opacity", 0)
        .style("stroke-width", 10)
        .style("stroke-opacity", .5)
        .style("stroke", function(d,i) { return colours[i]; });

    d3.selectAll("#venn .venn-circle text")
        .style("fill", function(d,i) { return colours[i]})
        .style("font-size", "32px")
        .style("font-weight", "100");
}

draw();
// redraw the sets on any change in input
d3.selectAll("input").on("change", draw);

</script>
</html>
